<template>
	<view>
		<img class="bg" src="https://hlximage.xiangle6.cn/home/images/hlxbbgg.png" alt="">
		<!-- 核验 -->
		<view v-if="pageState === 'hy'" class="hy-box">
			<image class="hx-bg" src="../../static/hx-bg.png" mode="scaleToFill"></image>
			<view class="hx-bg flex flex-col items-center">
				<image src="../../static/hx/dhm.png" style="width: 240rpx;height: 60rpx;margin: 158rpx 0 100rpx;" mode=""></image>
				<view class="dhm">
					请输入兑换码
				</view>
				<view class="srk flex items-center justify-center">
					<image src="../../static/hx/srk.png" mode="scaleToFill"></image>
					<input v-model="code" type="text" placeholder="请输入兑换码" placeholder-style="color: #FFFFFF;"/>
				</view>
				<image src="../../static/hx/tn.png" mode="" style="width: 200rpx;height: 80rpx;" @click="hy"></image>
			</view>
		</view>
		<!-- 核销 -->
		<view v-else class="hx-box">
			<image class="hx-bg" src="../../static/hx-bg.png" mode="scaleToFill"></image>
			<view class="hx-bg hx-content flex flex-col items-center justify-center">
				<view class="title">兑换码</view>
				<view class="srk flex items-center justify-center">
					<image src="../../static/hx-info-bg.png" mode="scaleToFill"></image>
					<view>{{ code }}</view>
				</view>
				<view class="title">手机号</view>
				<view class="srk flex items-center justify-center">
					<image src="../../static/hx-info-bg.png" mode="scaleToFill"></image>
					<view>{{ userInfo.phones || '' }}</view>
				</view>
				<view class="title">昵称</view>
				<view class="srk flex items-center justify-center">
					<image src="../../static/hx-info-bg.png" mode="scaleToFill"></image>
					<view>{{ userInfo.userName || '' }}</view>
				</view>
				<image src="../../static/qrhx.png" mode="" style="width: 200rpx;height: 80rpx;" @click="hx"></image>
			</view>
		</view>
		<Loading ref="loading"></Loading>
	</view>
</template>

<script>
	import Loading from '@/components/loding.vue'
	import { request } from '@/utils/request.js'
	
	export default {
		data() {
			return {
				pageState: 'hy',
				code: '',
				userInfo: {},
			};
		},
		components: {
			Loading
		},
		methods: {
			hy() {
				request('/api/hlx-activity/userInfo/bycode', { code: this.code }, 'get').then(res => {
					if (res.data.code === 200) {
						this.userInfo = res.data.data
						this.pageState = 'hx'
					} else {
						uni.showToast({
							title: '兑换码错误！',
							icon: 'error',
						})
					}
				})
			},
			hx() {
				request('/api/hlx-activity/cancelAfterVerification', { code: this.code, userId: this.userInfo.id }, 'get').then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: '核销成功！'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},
		},
		onLoad() {
			this.$refs.loading.init()
			this.$refs.loading.progress = 100
			setTimeout(() => {
				this.$refs.loading.destoryed()
			}, 500)
		}
	}
</script>

<style lang="less">
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.hy-box {
		width: 100%;
		height: 100%;
	}
.hx-bg{
	width: 90%;
	height: 60vh;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
page{
	background: #f2f2f2;
}
.dhm{
	font-size: 28rpx;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	color: #713600;
}
.srk{
	position: relative;
	// width: 80%;
	width: 400rpx;
	height: 60rpx;
	margin: 24rpx 0 32rpx;
	margin-left: 4%;
	image{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		right: 0;
	}
	input{
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
	}
}

.hx-box {
	.title {
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		color: #713600;
		line-height: 44rpx;
	}
	.hx-content {
		width: 400rpx;
	}
	.srk > view {
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 44rpx;
		position: absolute;
		z-index: 2;
	}
}
</style>
